<script setup>
    import { onMounted } from 'vue'
    import positionIcon from '../../../assets/images/position.png'

    const emit = defineEmits(['showDetail'])

    const props = defineProps({
        positionList: {
            type: Array,
            default: []
        }
    })

    let positionList = props.positionList
    let map = undefined


    onMounted(() => {

        let arr = positionList.map((item) => {
            return [item.longitude, item.latitude]
        })

        map = new BMapGL.Map("container");            // 创建Map实例
        map.enableScrollWheelZoom();                           //启用滚轮放大缩小  
        var point = new BMapGL.Point(...arr[0]);    // 创建点坐标
        map.centerAndZoom(point,12);                     // 初始化地图,设置中心点坐标和地图级别。

        var myIcon = new BMapGL.Icon(positionIcon, new BMapGL.Size(63, 81));
        
        // 创建Marker标注，使用小车图标
        var pt = new BMapGL.Point(116.89256516241869,35.33010937826072);
        var marker = new BMapGL.Marker(pt, {
            icon: myIcon
        });


        for(let i = 0; i < arr.length; i++){
            // 创建Marker标注，使用图标
            var pt = new BMapGL.Point(arr[i][0], arr[i][1]);
            var marker = new BMapGL.Marker(pt, {
                icon: myIcon
            });
            // 创建文本标注对象
            var labelopts = {
                position: pt, // 指定文本标注所在的地理位置
                offset: new BMapGL.Size(0, -80), // 设置文本偏移量
            };
            var label = new BMapGL.Label(positionList[i].facname, labelopts);
            label.setStyle({ 
                color : "#fff", 
                fontSize : "16px", 
                backgroundColor:"rgba(0,0,0,0.6)",
                border :"2px", 
                fontWeight :"bold",
                padding: '5px 10px',
                transform: 'translateX(-50%)',
                cursor: 'pointer'
            });
            map.addOverlay(label);
            map.addOverlay(marker)


            // 鼠标点击坐标
            marker.addEventListener('click', function (e) {
                // emit('showDetail', positionList[i].facid, positionList[i].id)
                diffOverlap(positionList[i])
            });
        }
    })

    // 点击坐标先查询一下是否和其他设备重叠
    let overlapData = $ref([])
    const diffOverlap = (data) => {
        selectIndex = 0
        overlapData = []
        overlapData = positionList.filter((item) => {
            return item.latitude == data.latitude && item.longitude == data.longitude
        })

        if(overlapData.length > 1){
            showSelect = true
        }else{
            emit('showDetail', data.facid, data.id)
        }
    }

    // 选择设备
    let selectIndex = $ref(0)
    let showSelect = $ref(false)
    const handleSelectFac = () => {
        showSelect = false
        emit('showDetail', positionList[selectIndex].facid, positionList[selectIndex].id)
    }

    // 点击区域村 设置该村区域地图中心点
    const setMapCenterPoint = (latitude, longitude) => {

        // 创建点坐标
        var point = new BMapGL.Point(longitude, latitude);    

        // 初始化地图,设置中心点坐标和地图级别。
        map.centerAndZoom(point, 16);                     
    }

    // 地图类型
    let mapType = [{ name: '地图', code: BMAP_NORMAL_MAP }, { name: '卫星', code: BMAP_SATELLITE_MAP }]
    let currentMapType = $ref('地图')
    const handleClickMapType = ({ name, code }) => {
        currentMapType = name
        map.setMapType(code);
    }

    defineExpose({
        setMapCenterPoint
    })

</script>

<template>
    <div class="agriculture-map-wrap">
        <div id="container"></div>

        <el-dialog
            title="请选择设备"
            v-model="showSelect"
            :append-to-body="true"
            width="320px">

            <el-radio-group 
                v-model="selectIndex"
                class="fac-radio"
            >
                <el-radio 
                    v-for="(item, index) in overlapData"
                    :key="index"
                    :label="index">
                    {{ item.facname }}
                </el-radio>
            </el-radio-group>

            <template #footer>
                <el-button @click="showSelect = false">取 消</el-button>
                <el-button type="primary" @click="handleSelectFac">确 认</el-button>
            </template>
        </el-dialog>

        <div class="map-tabbar flex-center">
            <div
                v-for="(item, index) in mapType"
                :key="index"
                class="tabbar-item"
                :class="{ active: currentMapType == item.name }"
                @click="handleClickMapType(item)"
            >
                {{ item.name }}
            </div>
        </div>
        
    </div>


</template>

<style lang="less" scoped>
    .agriculture-map-wrap{
        width: 100%;
        height: 100%;
        // background: #fff;

        #container{
            width: 100%;
            height: 100%;
        }
    }
</style>

<style lang="less">
    .fac-radio{
        .el-radio{
            width: 100%;
        }
    }
</style>